<template>
  <!-- 模块1 -->
  <div class="modular">
    <div class="modular_top">
      <div class="triangle"></div>
      <div class="modular_icon">
        <img src="@/assets/img/wb.png" alt="">
      </div>
      <h2>用户占比/异常分析<span v-if="$store.state.building">东湖花园小区{{ $store.state.listData.infoS[0].buildNo < 10 ?
      (Array(2).join(0) + $store.state.listData.infoS[0].buildNo).slice(-2) :
      $store.state.listData.infoS[0].buildNo }}栋</span>
      </h2>
    </div>
    <div class="maintain_cont">
      <div class="mainEcharts_cont">
        <div class="mainEcharts1"></div>
        <!-- <div class="maintain_bj_cir"></div> -->
      </div>
      <div class="maintain_bj" v-if="this.arr.length != 0"></div>
      <div class="mainEcharts_cont">
        <div class="mainEcharts2"></div>
        <!-- <div class="maintain_bj_cir"></div> -->
      </div>
    </div>
  </div>
</template>

<script>
import * as api from '@/assets/utils/api.js'

export default {
  data() {
    return {
      myChart: {},
      myChart2: {},
      cirColor: '#5eb3f3',
      tenantid: 1128,
      community: 1,
      buildNo: '',
      arr: [],
      value: 0,
      highLightFlag:-1
    }
  },
  created() {
  },
  mounted() {
    setTimeout(() => {
      this.getData()
    }, 2000)
  },
  watch: {
    'cirColor'() {
      this.initChart(this.arr.user)
    }
  },
  methods: {
    async getData(clientTypestr, color) {
      const res = await api.userAccountPer({ tenantid: this.tenantid, community: this.community, buildNo: this.buildNo, clientType: clientTypestr })
      this.arr = res.data
      if (this.arr) {
        this.initChart(res.data.user)
        this.initChart2(res.data.alram, color)
        //根据窗口变化自动调节图表大小
        window.addEventListener('resize', () => {
          this.myChart.resize()
          this.myChart2.resize()
        })
      }
    },
    changeBuildNo(id) {
      this.buildNo = id
      this.getData()
    },
    initChart(data = { '空置房': 1, '孤寡老人': 1, '上班族': 1, '低保户': 1 }) {
      this.myChart = this.$echarts.init(document.querySelector('.mainEcharts1'))
      let option = {
        // tooltip: {
        //   trigger: 'item'
        // },
        legend: [
          {
            top: '0%',
            left: '15%',
            orient: 'vertical',
            itemHeight: 10,
            itemWidth: 10,
            icon: 'circle',
            data: ['空置房', '上班族'],
            textStyle: {
              fontSize: '0.12rem',//字体大小
              color: '#ffffff',//字体颜色,
            },
            selectedMode: false
          },
          {
            top: '0%',
            left: '50%',
            orient: 'vertical',
            itemHeight: 10,
            itemWidth: 10,
            icon: 'circle',
            data: ['孤寡老人', '低保户'],
            textStyle: {
              fontSize: '0.12rem',//字体大小
              color: '#ffffff'//字体颜色
            },
            selectedMode: false
          }
        ],
        color: ['#d75c2b', '#702fd2', '#6be795', '#59a9f1'],
        series: [
          {
            // name: 'Access From',
            type: 'pie',
            radius: ['40%', '60%'],
            center: ['46%', '60%'],
            avoidLabelOverlap: false,
            label: {
              show: true,
              normal: {
                show: false,
                position: 'center',
                formatter: '{d}%',
                rich: {
                  d: {
                    fontSize: 20,
                    color: '#fff',
                    // algin: 'left'
                  }
                }
              }
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '0.14rem',
                fontWeight: 'bold',
                color: '#fff'
              }
            },
            // labelLine: {
            //   show: false
            // },
            data: [
              { value: data['空置房'], name: '空置房' },
              { value: data['孤寡老人'], name: '孤寡老人' },
              { value: data['上班族'], name: '上班族' },
              { value: data['低保户'], name: '低保户' },
            ]
          },
          {
            type: 'pie',
            radius: ['0%', '30%'],
            center: ['46%', '60%'],
            avoidLabelOverlap: false,
            color: this.cirColor,
            label: {
              show: true,
              position: 'center',
            },
            labelLine: {
              show: false
            },
            emphasis: {
              label: {
                show: true
              }
            },
            data: [
              { value: this.value },
            ]
          },
        ]
      }
      this.myChart.setOption(option)
      this.myChart.off('click')
      this.myChart.on('click', (params) => {
        this.cirColor = params.color
        this.value = params.data.value
        let num = '', color = []
        if (params.data.name == '低保户') {
          num = 0
          color = ['#2861d9', '#4893ee', '#73beff', '#b1f6ff']
        } else if (params.data.name == '上班族') {
          num = 1
          color = ['#2faf95', '#37d1b2', '#5bebce', '#a5ffed']
        } else if (params.data.name == '孤寡老人') {
          num = 2
          color = ['#651ed1', '#7d3edd', '#9158e6', '#af81f4']
        } else if (params.data.name == '空置房') {
          num = 3
          color = ['#d25625', '#ec7749', '#f99a75', '#ffbba0']
        } else {
          num = ''
        }
        this.getData(num, color)
        return false
        // console.log(params.data.value)
      })
      this.myChart.on('mouseover', (params) => {
        this.cirColor = params.color
        this.value = params.data.value
        // console.log(params.data.value)
        if(this.highLightFlag != params.dataIndex){
          this.myChart.dispatchAction({type: 'downplay', seriesIndex: 0, dataIndex: this.highLightFlag})
          this.myChart.dispatchAction({type: 'highlight', seriesIndex: 0, dataIndex: params.dataIndex})
          this.highLightFlag = params.dataIndex
        }
      })
      // this.myChart.on('legendselectchanged', (params) => {
      //   console.log(params)
      // })
    },
    initChart2(data = { '水量异常': 1, 'TDS异常': 1, '压力异常': 1 }, colors = ['#2861d9', '#4893ee', '#73beff', '#b1f6ff']) {
      this.myChart2 = this.$echarts.init(document.querySelector('.mainEcharts2'))
      this.myChart2.setOption({
        tooltip: {
          trigger: 'item'
        },
        legend: [
          {
            top: '0%',
            left: '10%',
            orient: 'vertical',
            itemHeight: 10,
            itemWidth: 10,
            icon: 'circle',
            data: ['水量异常', 'TDS异常'],
            textStyle: {
              fontSize: '0.12rem',//字体大小
              color: '#ffffff',//字体颜色,
            },
          },
          {
            top: '0%',
            left: '45%',
            orient: 'vertical',
            itemHeight: 10,
            itemWidth: 10,
            icon: 'circle',
            data: ['水压异常'],
            textStyle: {
              fontSize: '0.12rem',//字体大小
              color: '#ffffff'//字体颜色
            },
          }
        ],
        color: colors,
        series: [
          {
            // name: 'Access From',
            type: 'pie',
            radius: ['10%', '45%'],
            center: ['42%', '60%'],
            label: {
              fontSize: '0.12rem',
              color: '#fff',
            },
            labelLine: {
              show: true,
              length: 2,
              length2: 2
            },
            data: [
              { value: data['流量异常'], name: '水量异常' },
              { value: data['TDS异常'], name: 'TDS异常' },
              { value: data['压力异常'], name: '水压异常' },
              // { value: data['合计'], name: '水质异常' },
            ],
            // emphasis: {
            //   label: {
            //     show: true,
            //     fontSize: '0.12rem',
            //     fontWeight: 'bold',
            //     color: '#fff'
            //   }
            // },
          }
        ]
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.maintain_cont {
  padding: 0.55rem 0.1rem 0 0.1rem;
  display: flex;
  justify-content: space-between;
  position: relative;

  .mainEcharts_cont {
    width: 50%;
    height: 2.2rem;
    position: relative;

    // .maintain_bj_cir {
    //   position: absolute;
    //   left: 18%;
    //   top: 35%;
    //   width: 1.1rem;
    //   height: 1.1rem;
    //   border: 1rem;
    //   border-radius: 50%;
    //   background: linear-gradient(0deg, #073487, #547FFE);
    //   opacity: 0.8;
    //   z-index: -1;
    // }

    .mainEcharts1,
    .mainEcharts2 {
      width: 100%;
      height: 100%;
    }
  }

  .maintain_bj {
    position: absolute;
    width: 1.9rem;
    height: 1.1rem;
    left: 50%;
    top: 50%;
    transform: translate(-50%, 0);
    background: url(/src/assets/img/gl.png) no-repeat center;
    background-size: 100% 100%;
    z-index: -2;
  }
}
</style>
